<template>
  <div class="about">
    <Bgimg>关于</Bgimg>
    <Container :showUser="false">
      <div class="about-box">
        <div class="title">
          <span>【关于我】</span>
        </div>
        <div class="content">
          <ul>
            <li>
              <div class="tag">昵称：</div>
              <div class="ins">小析</div>
            </li>
            <li>
              <div class="tag">性别：</div>
              <div class="ins">男</div>
            </li>
            <li>
              <div class="tag">年龄：</div>
              <div class="ins">19</div>
            </li>
            <li>
              <div class="tag">职业：</div>
              <div class="ins">在校学生</div>
            </li>
            <li>
              <div class="tag">爱好：</div>
              <div class="ins">打游戏、睡觉</div>
            </li>
            <li class="skill">
              <div class="tag">技能：</div>
              <div class="ins">
                  <div class="progress">
                    <span>Java</span>
                    <el-progress :percentage="50" color="#f56c6c"/>
                    <span>JavaScript</span>
                    <el-progress :percentage="60" color="#e6a23c" />
                    <span>HTML + CSS</span>
                    <el-progress :percentage="80" color="#67c23a"/>
                    <span>Node.js</span>
                    <el-progress :percentage="50" color="yellow"/>
                    <span>Python</span>
                    <el-progress :percentage="20" color="#409eff"/>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="about-box">
          <div class="title">
              <span>【关于博客】</span>
          </div>
          <div class="content">
              <ul>
                  <li>目前正在制作中...</li>
              </ul>
          </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Bgimg from "components/Bgimg.vue";
import Container from "components/container/Container.vue";
export default {
  components: {
    Bgimg,
    Container,
  },
};
</script>

<style scoped>
.container {
    flex-direction: column;
    align-items: center;
}
.about-box {
    /* flex: .5; */
    width: 60%;
    margin-bottom: var(--mtop);
}
.about-box .title {
  text-align: center;
  font-size: 25px;
  color: #848484;
  margin-bottom: 50px;
}
.about-box .content {
    border: 1px dotted #ccc;
    padding: 10px;
    color: #848484;
    font-size: 14px;
    border-radius: var(--radius);
}
.about-box .content ul {
    list-style: disc;
    padding-left: 40px;
}
.about-box .content li {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}
.about-box .content .skill {
    display: block;
}
.about-box .content .skill .ins {
    padding-left: 50px;
    font-size: 14px;
}
.el-progress {
    margin: 15px 0;
}
@media screen and (max-width:768px) {
    .about-box {
        flex: 1;
    }
    .about-box .content {
        border: none;
    }
}
</style>